// ----------------------- 获取全部5次成绩 --------------------------
axios.get('/score/list').then(({ data: res }) => {
    let { code, data } = res;
    if (code === 0) {
      // console.log(data);
      let str = '';
      for (let key in data) {
        // key 就是对象的键，表示学员id
        // data[key] 表示对象的值
        str += `
        <tr>
          <th scope="row">${key}</th>
          <td>${data[key].name}</td>
          <td class="score">${data[key].score[0]}</td>
          <td class="score">${data[key].score[1]}</td>
          <td class="score">${data[key].score[2]}</td>
          <td class="score">${data[key].score[3]}</td>
          <td class="score">${data[key].score[4]}</td>
        </tr>
        `;
      }
      // 循环结束，得到很多tr。把tr放到tbody中
      $('tbody').html(str);
    }
  })
  
  
  // ---------------------- 点击单元格，能够编辑数据 --------------------
  // 思路：点击 td 的时候，创建input，把input放到 td 中。
  $('tbody').on('click', '.score', function () {
    let td = $(this);
    if (td.children().length > 0) return; // 判断td中的子元素的个数，如果大于0。则表示有一个input了。则 return
    // 获取td中的 分数
    let text = td.text();
    // 清空td
    td.html('');
    // 创建input，并放到td中
    let input = $('<input />');
    // 美化input
    input.css({
      border: 'none',
      outline: 'none',
      background: td.css('background'),
      textAlign: 'center'
    });
    input.val(text);
    td.append(input)
    input.trigger('focus'); // 让input获取焦点
  
    // -------------------------- 注册 blur 事件 ----------------------
    input.on('blur', function () {
      // 失去焦点，表示取消修改或录入
      // 把原来的值，放回到 td 中
      td.text(text);
    })
  })
